<template>
    <div class="website-container">
      <el-row>
        <div class="logo">
            <el-menu class="el-menu-demo" mode="horizontal">
                <el-menu-item>主页</el-menu-item>
              <el-menu-item>蛋糕</el-menu-item>
              <el-menu-item>面包</el-menu-item>
              <el-menu-item>下午茶</el-menu-item>

            </el-menu>
      </div>

      </el-row>

      <el-row>
      <div class="item-list">

        <el-col span="6" v-for="item in 8" :key="item">
          <el-card >
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
            <div >
              <span>好吃的汉堡</span>
              <div class="bottom clearfix">
                <time class="time">{{ currentDate }}</time>
                <router-link :to="{path:'/website/info',query:{cake_id:item}}">购买</router-link>
              </div>
            </div>
          </el-card>
        </el-col>


      </div>

      </el-row>
    </div>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped>
 .website-container{
     padding: 20px;
     background-color: #fff !important;
 }

  .logo{
    width: 1224px;
    height: 320px;
    background-image:url('../../assets/bg-cake.png') ;
    background-size: cover;
  }

  .item-list{
      padding: 50px;
  }

  .el-card{
     background: rgba(233 ,229, 226,.1);
     margin-right: 5px;
     margin-bottom: 5px;
  }

  .el-menu{
    background-color:rgba(215 ,221 ,227, .4);
    padding-left:60px ;
    font-weight: bold;
  }

</style>
